<template>
  <div>
    <!-- 货物需求添加 2018/3/6 12:26 zhangQ -->
    <Row>
      <Col span="24">

        <div style="" class="doc-header">
          <Form :model="addProductForm" :label-width="120" ref="addProductForm" :rules="addProductRule">
            <Form-item label="信息类型" prop="msgType">
              <Select v-model="addProductForm.msgType" placeholder="请选择">
                <Option v-for="item in msgTypeList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </Form-item>
            <Form-item label="产品类型" prop="productType">
              <Select v-model="addProductForm.productType" placeholder="请选择">
                <Option v-for="item in productTypeList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </Form-item>

            <Form-item label="产品属性" prop="productName">
              <Input v-model="addProductForm.productName" placeholder="货物需求请填写货物名称，车辆需求请填写车号"></Input>
            </Form-item>

            <Form-item label="数量" prop="number">
              <Input v-model="addProductForm.number" placeholder="需求数量">
              <Select v-model="addProductForm.unit" slot="append" placeholder="单位" style="width: 100px">
                <Option :value="item.cName" :key="item.cName" v-for="item in unitList">{{item.cName}}</Option>
              </Select>
              </Input>
            </Form-item>

            <Form-item label="所在城市">
              <Cascader :data="cityList" change-on-select v-model="addProductForm.localCityId"></Cascader>
            </Form-item>

            <Form-item label="所在城市详细地址" prop="localCityDetail">
              <Input v-model="addProductForm.localCityDetail" placeholder="请填写详细地址"></Input>
            </Form-item>

            <Form-item label="目的地城市">
              <Cascader :data="cityList" change-on-select v-model="addProductForm.needCityId"></Cascader>
            </Form-item>

            <Form-item label="目的地详细地址" prop="needCityDetail">
              <Input v-model="addProductForm.needCityDetail" placeholder="请填写详细地址"></Input>
            </Form-item>

            <Form-item label="联系人" prop="userName">
              <Input v-model="addProductForm.userName" placeholder="联系人"></Input>
            </Form-item>

            <Form-item label="手机号" prop="mobile">
              <Input v-model="addProductForm.mobile" placeholder="手机号"></Input>
            </Form-item>

            <Form-item>
              <Button type="primary" @click="submitAdd('addProductForm')">提交</Button>
              <Button type="ghost" style="margin-left: 8px" @click="goBack">取消</Button>
            </Form-item>
          </Form>

        </div>
      </Col>

    </Row>
  </div>
</template>
<script>
  import {getCityList, addProductDemand} from '@api/backEnd/productDemand'

  export default {
    name: 'productRequirementAdd',
    data () {
      return {
        unitList: [
          {cName: '个', code: ''},
          {cName: '辆', code: ''},
          {cName: '米', code: ''},
          {cName: '平方米', code: '㎡'},
          {cName: '立方米', code: 'm³'},
          {cName: '升', code: 'L'},
          {cName: '千克', code: 'kg'},
          {cName: '吨', code: ''},
          {cName: '千米', code: ''},
          {cName: '平方千米', code: ''},
          {cName: '千升', code: ''}
        ],
        addProductForm: {
          msgType: [],
          productType: [],
          productName: null,
          number: null,
          localCityId: [],
          needCityId: [],
          localCityDetail: '',
          needCityDetail: '',
          userName: null,
          mobile: null,
          unit: ''
        },
        cityList: [],
        msgTypeList: [
          {
            value: '1',
            label: '需求'
          },
          {
            value: '2',
            label: '供给'
          }
        ],
        productTypeList: [
          {
            value: '1',
            label: '车辆'
          },
          {
            value: '2',
            label: '货物'
          },
          {
            value: '3',
            label: '集装箱'
          }
        ],
        addProductRule: {
          msgType: [
            {required: true, message: '信息类型必选', trigger: 'change'}
          ],
          productType: [
            {required: true, message: '产品类型必选', trigger: 'change'}
          ],
          productName: [
            {required: true, message: '产品名称必填', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '数量必填', trigger: 'blur'}
          ],
          localCityId: [
            {required: true, message: '所在城市必选', trigger: 'change'}
          ],
          needCityId: [
            {required: true, message: '目标城市必选', trigger: 'change'}
          ],
          localCityDetail: [
            {required: true, message: '所在城市详细地址必填', trigger: 'blur'}
          ],
          needCityDetail: [
            {required: true, message: '目的地城市详细地址必填', trigger: 'blur'}
          ],
          userName: [
            {required: true, message: '用户名必填', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '手机号码必填', trigger: 'blur'},
            {pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '号码格式不正确！', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {},
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      submitAdd (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (!this.addProductForm.localCityId.length) {
              this.$Message.error('所在地必选！')
              return false
            }
            if (!this.addProductForm.needCityId.length) {
              this.$Message.error('目的地必选！')
              return false
            }
            if (!this.addProductForm.unit) {
              this.$Message.error('请选择需求数量单位！')
              return false
            }
            const msgType = this.addProductForm.msgType * 1
            const productType = this.addProductForm.productType * 1
            const productName = this.addProductForm.productName
            const number = this.addProductForm.number
            const localCityId = this.addProductForm.localCityId[this.addProductForm.localCityId.length - 1]
            const needCityId = this.addProductForm.needCityId[this.addProductForm.needCityId.length - 1]
            let localCityDetail = this.addProductForm.localCityDetail
            let needCityDetail = this.addProductForm.needCityDetail
            let mobile = this.addProductForm.mobile
            const userName = this.addProductForm.userName
            let unit = this.addProductForm.unit
            const param = {msgType, productType, productName, number, localCityId, needCityId, userName, mobile, localCityDetail, needCityDetail, unit}
            // const param = {msgType, productType, productName, number, localCityId, needCityId, userName, mobile, localCityDetail, needCityDetail}
            console.log('form', param)
            addProductDemand(param).then(res => {
              if (res.data.isSuccess) {
                this.$Message.success('发布成功')
                this.$router.push({path: '/back_end/product_requirement/product_requirement_list'})
              } else {
                this.$Message.error('发布失败请重试！')
              }
            })
          }
        })
      },
      setInitData () {
        getCityList().then(res => {
          if (res.data.isSuccess === 1) {
            this.cityList = res.data.data
          }
        })
      }
    },
    created () {
    },
    mounted () {
      this.setInitData()
    },
    components: {}
  }
</script>
<style scoped>

</style>
